<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
-->
<!-- 
* @desc:选择资源组件
* @fileName:TreeDialog.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-4-20
!-->
<script setup lang="ts">
import { ElMessage, ElTree } from "element-plus";
import { onMounted, reactive, ref, watch, getCurrentInstance } from "vue";
import { Search, Check } from "@element-plus/icons-vue";
const { proxy } = getCurrentInstance() as any;

const props = defineProps({
  groupTreeList: Array as any,
  resourceConfigId: String,
  resourceType: String,
  getGroupInfo: Function as any,
  resourceValue: {
    type: String,
    default: "",
  },
});

/**
 * 定义列表数据
 */
const listData = reactive({
  selectList: [] as any,
  isLoading: false,
  path: "",
  seleted: "",
  allPath: "",
});

/**
 * 定义请求数据
 */
const filterText = ref("");
const treeRef = ref<InstanceType<typeof ElTree>>();
watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

/**
 * 查询过滤
 */
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.name.includes(value);
};

/**
 * 树字段类型
 */
interface Tree {
  nodeName: string;
  leaf?: boolean;
}

/**
 * 资源组树结构
 */
const propsVar = {
  label: "nodeName",
  children: "children",
  isLeaf: "isLeaf",
};

/**
 * 资源数树结构
 */
const jobProps = {
  label: "name",
  children: "children",
};

/**
 * 加载任务资源
 * @param id 分组ID
 * @param nodeInfo 节点信息
 * @reture viod
 */
const sonTreeLoad = (id: string, nodeInfo: any) => {
  if (nodeInfo !== "") {
    listData.path = nodeInfo.data.path;
  }
  listData.isLoading = true;
  const res = proxy.$HTTP.get({
    url: "/resource/taskResource/getExternalResourceFile",
    params: {
      directoryId: id,
      resourceConfigId: props.resourceConfigId,
      resourceType: props.resourceType,
    },
  });
  res
    .then((res: any) => {
      if (res.code === 200) {
        listData.selectList = [];
        if (props.resourceType === "1") {
          let jobsArr: any = { name: "作业", id: "job", children: [] };
          jobsArr.children = [...res.data.jobs];
          listData.selectList.push(jobsArr);
        } else {
          let transformations: any = {
            name: "转换",
            id: "transfor",
            children: [],
          };
          transformations.children = [...res.data.transformations];
          listData.selectList.push(transformations);
        }
      }
      listData.isLoading = false;
    })
    .catch((response: any) => {
      listData.isLoading = false;
      ElMessage.error(response.data);
    });
};

/**
 * 点击选择任务资源
 * @param nodeInfo 节点信息
 * @reture viod
 */
const chooseOne = (nodeInfo: any) => {
  if (nodeInfo.data.id === "job" || nodeInfo.data.id === "transfor") {
    return;
  }
  listData.seleted = nodeInfo.label;
  if (typeof nodeInfo.data.idJob !== "undefined") {
    listData.allPath = listData.path + "/" + nodeInfo.label + ".job";
  } else {
    listData.allPath = listData.path + "/" + nodeInfo.label + ".ktr";
  }
};

/**
 * 提交
 * @reture viod
 */
const onSubmit = () => {
  props.getGroupInfo(listData.allPath);
};

/**
 * 文字长度限制
 * @param nodeName 节点名称
 * @reture 截取后的节点名称
 */
const ellipsis = (nodeName: string) => {
  if (!nodeName) return "";
  if (nodeName.length > 20) {
    return nodeName.slice(0, 20) + "...";
  }
  return nodeName;
};

onMounted(() => {
  sonTreeLoad("0", "");
  if (props.resourceValue !== "") {
    listData.seleted = props.resourceValue;
  }
});
</script>

<template>
  <el-row :gutter="20" v-loading="listData.isLoading">
    <el-col :span="12">
      <div class="title">
        资源分组<span> (请点击资源名称加载任务资源)</span>
      </div>
      <el-tree
        class="left-menu"
        :props="propsVar"
        :default-expand-all="true"
        :data="props.groupTreeList"
        node-key="id"
        :expand-on-click-node="false"
      >
        <template #default="{ node, data }">
          <span @click="sonTreeLoad(node.data.id, node)" :title="node.label">{{
            ellipsis(node.label)
          }}</span>
        </template>
      </el-tree>
    </el-col>
    <el-col :span="12">
      <div class="title">任务资源</div>
      <el-input
        v-model="filterText"
        :suffix-icon="Search"
        clearable
        placeholder="请输入资源名称"
      />
      <el-tree
        :props="jobProps"
        :data="listData.selectList"
        :default-expand-all="true"
        :filter-node-method="filterNode"
        ref="treeRef"
      >
        <template #default="{ node, data }">
          <div class="tree-label" @click="chooseOne(node)">
            <span :title="node.label">{{ ellipsis(node.label) }}</span>
            <span class="selected" v-if="node.label === listData.seleted"
              ><el-icon><check /></el-icon
            ></span>
          </div>
        </template>
      </el-tree>
    </el-col>
  </el-row>
  <div class="text-right">
    <el-button @click="onSubmit">确定</el-button>
  </div>
</template>

<style lang="scss">
.left-menu {
  width: 100%;
  overflow: auto;
}
.left-menu > .el-tree-node {
  display: inline-block;
  min-width: 100%;
}
</style>
<style lang="scss" scoped>
.tree-label {
  display: flex;
  width: 100%;
  height: 35px;
  line-height: 35px;
}
.selected {
  position: relative;
  top: 3px;
  .el-icon {
    color: #58cd6c;
    font-weight: 700;
    font-size: 20px;
  }
}
.text-right {
  text-align: right;
  margin-top: 50px;
}
.title {
  font-size: 14px;
  color: rgba($color: #000000, $alpha: 0.5);
  background-color: #f5f5f5;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  margin-bottom: 10px;
  font-weight: 700;
  span {
    font-size: 14px;
    color: #888;
  }
}
</style>
